<extend name="public@base5"/>
<block name="main">
    <div class="wrap js-check-wrap">
        <ul class="nav nav-tabs">
            <li class="nav-item">
                <a class="nav-link"
                   href="{:url('NavMenu/index',['nav_id'=>$nav_id])}">{:lang('ADMIN_NAVMENU_INDEX')}</a>
            </li>
            <li class="nav-item">
                <a class="nav-link active">{:lang('ADMIN_NAVMENU_ADD')}</a>
            </li>
        </ul>
        <form method="post" class="js-ajax-form margin-top-20" action="admin/nav/menus">
            <div class="row mb-3">
                <label class="col-sm-2 col-form-label text-sm-end">{:lang('Parent')}</label>
                <div class="col-md-8 col-sm-10">
                    <select name="parent_id" class="form-control">
                        <option value="0">/</option>
                        {$nav_trees}
                    </select>
                </div>
            </div>
            <div class="row mb-3 form-inline">
                <label class="col-sm-2 col-form-label text-sm-end">
                    <span class="form-required">*</span>{:lang('Url')}
                </label>
                <div class="col-md-4 col-sm-5">
                    <div class="input-group">
                        <div class="input-group-text">
                            <input class="form-check-input mt-0" type="radio" id="select-href-radio">
                        </div>
                        <select name="href" id="select-href" class="form-control">
                            <option value="{:base64_encode('home')}" data-name="{:lang('HOME')}">{:lang('HOME')}
                            </option>
                            <foreach name="navs" item="vo">
                                <optgroup label="{$vo.name}">
                                    {$vo.html}
                                </optgroup>
                            </foreach>
                        </select>
                    </div>
                </div>
                <div class="col-md-4 col-sm-5">
                    <div class="input-group">
                        <div class="input-group-text">
                            <input class="form-check-input mt-0" type="radio" id="external-link-radio">
                        </div>
                        <input type="text" class="form-control" name="href" id="external-link-input">
                    </div>
                </div>
            </div>
            <div class="row mb-3">
                <label class="col-sm-2 col-form-label text-sm-end">
                    <span class="form-required">*</span>{:lang('Name')}
                </label>
                <div class="col-md-8 col-sm-10">
                    <input type="text" class="form-control" name="name" id="name-input">
                </div>
            </div>
            <div class="row mb-3">
                <label class="col-sm-2 col-form-label text-sm-end">{:lang('Url Target')}</label>
                <div class="col-md-8 col-sm-10">
                    <select class="form-control" name="target">
                        <option value="">{:lang('Default')}</option>
                        <option value="_blank">_Blank</option>
                    </select>
                </div>
            </div>
            <div class="row mb-3">
                <label class="col-sm-2 col-form-label text-sm-end">{:lang('Icon')}</label>
                <div class="col-md-8 col-sm-10">
                    <input type="text" class="form-control" name="icon" value="">
                </div>
            </div>
            <div class="row mb-3">
                <label class="col-sm-2 col-form-label text-sm-end">{:lang('Status')}</label>
                <div class="col-md-8 col-sm-10">
                    <select name="status" class="form-control">
                        <option value="1">{:lang('DISPLAY')}</option>
                        <option value="0">{:lang('HIDDEN')}</option>
                    </select>
                </div>
            </div>
            <div class="row mb-3">
                <label class="col-sm-2 col-form-label text-sm-end"></label>
                <div class="col-md-8 col-sm-10">
                    <input type="hidden" name="nav_id" value="{$nav_id}"/>
                    <button type="submit" class="btn btn-primary js-ajax-submit">
                        <i class="fa fa-save fa-fw"></i> {:lang('ADD')}
                    </button>
                    <a class="btn btn-secondary"
                       href="{:url('NavMenu/index',['nav_id'=>$nav_id])}">{:lang('BACK')}</a>
                </div>
            </div>
        </form>
    </div>
</block>
<block name="scripts">
    <script>
        $(function () {
            $("#select-href,#select-href-radio").click(function () {
                checkChange(2);
            });

            $("#select-href").change(function () {
                var $this = $(this);
                var label = $this.find("option[value='" + $this.val() + "']").data('name');
                $('#name-input').val(label);
            });

            $("#external-link-input,#external-link-radio").click(function () {
                checkChange(1);
            });

            function checkChange(i) {
                if (i == 1) {
                    //自动输入url
                    $('#external-link-input').attr('name', 'external_href');
                    $('#select-href').removeAttr('name');
                    $('#select-href-radio').prop('checked', false);
                    $('#external-link-radio').prop('checked', true);
                } else {
                    //选择链接url
                    $('#select-href').attr('name', 'href');
                    $('#external-link-input').removeAttr('name');
                    $('#select-href-radio').prop('checked', true);
                    $('#external-link-radio').prop('checked', false);
                }
            }
        });
    </script>
</block>
